<template>
    <div class="calendar">
        <div class="calendar-week">
            <div class="calendar-week-item">一</div>
            <div class="calendar-week-item">二</div>
            <div class="calendar-week-item">三</div>
            <div class="calendar-week-item">四</div>
            <div class="calendar-week-item">五</div>
            <div class="calendar-week-item">六</div>
            <div class="calendar-week-item">日</div>
        </div>
        <div class="calendar-day" :class="{'toggle':toggle}">
            <div class="calendar-day-layer">
                <div class="calendar-day-row">
                    <div class="calendar-day-row-column">1</div>
                    <div class="calendar-day-row-column">2</div>
                    <div class="calendar-day-row-column">3</div>
                    <div class="calendar-day-row-column">4</div>
                    <div class="calendar-day-row-column">5</div>
                    <div class="calendar-day-row-column">6</div>
                    <div class="calendar-day-row-column">7</div>
                </div>
                <div class="calendar-day-row  calendar-day-row_active">
                    <div class="calendar-day-row-column">11</div>
                    <div class="calendar-day-row-column">2</div>
                    <div class="calendar-day-row-column">3</div>
                    <div class="calendar-day-row-column">4</div>
                    <div class="calendar-day-row-column">5</div>
                    <div class="calendar-day-row-column">6</div>
                    <div class="calendar-day-row-column">7</div>
                </div>
                <div class="calendar-day-row">
                    <div class="calendar-day-row-column">1</div>
                    <div class="calendar-day-row-column">2</div>
                    <div class="calendar-day-row-column">3</div>
                    <div class="calendar-day-row-column">4</div>
                    <div class="calendar-day-row-column">5</div>
                    <div class="calendar-day-row-column">6</div>
                    <div class="calendar-day-row-column">7</div>
                </div>
                <div class="calendar-day-row ">
                    <div class="calendar-day-row-column">14</div>
                    <div class="calendar-day-row-column">2</div>
                    <div class="calendar-day-row-column">3</div>
                    <div class="calendar-day-row-column">4</div>
                    <div class="calendar-day-row-column">5</div>
                    <div class="calendar-day-row-column">6</div>
                    <div class="calendar-day-row-column">7</div>
                </div>
                <div class="calendar-day-row ">
                    <div class="calendar-day-row-column">1</div>
                    <div class="calendar-day-row-column">2</div>
                    <div class="calendar-day-row-column">3</div>
                    <div class="calendar-day-row-column">4</div>
                    <div class="calendar-day-row-column">5</div>
                    <div class="calendar-day-row-column">6</div>
                    <div class="calendar-day-row-column">7</div>
                </div>
            </div>

        </div>
    </div>
    <button @click="handleToggle">toggle</button>
</template>

<script setup lang="ts">

// let num = [11,22,33,33,11,22,11];
// let newNum = [...new Set(num)];
// console.log(newNum);
// // or
// let newNum2 = num.reduce((p,v)=>{
//     if(!p.includes(v)){
//         p.push(v)
//     }
//     return p;
// },[])
// console.log(newNum2);

// let str = 'abcdefgabcdaaaa';
// let lenObj = {};
// for(let i =0;i<str.length;i++){
//     let key = str[i];
//     if(key in lenObj){
//         lenObj[key] =  lenObj[key] +1;
//     }else{
//         lenObj[key] = 1;
//     }
// }
// let store_values = Object.entries(lenObj)
// let maxs = store_values.sort((a,b)=>{
//     return b[1] - a[1];
// })
// console.log(maxs[0]);


import {ref} from 'vue';
let toggle = ref(false);
const handleToggle = () =>{
    toggle.value = !toggle.value;
}
</script>

<style lang="less" scoped>
.calendar {
    width: 100%;
    height: auto;
}

.calendar-week {
    height: 30px;
    display: flex;
}

.calendar-week-item {
    flex: 1;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
}

.calendar-day {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    transition:.5s 0s height linear;
}

.calendar-day-row {
    height: 40px;
    display: flex;
}

.calendar-day-row-column {
    height: 100%;
    line-height: 40px;
    text-align: center;
    flex: 1;
}

.calendar-day-layer{
    width: 100%;
    position: absolute;
    top: 0px;
    transition: top .5s linear;
}
.toggle{
    height: 40px;
    transition: .5s 0s height linear;
    .calendar-day-layer{
        top: -160px;
    }
}
.calendar-day-row_active{
    position: sticky;
    top: 0px;
    background: #eee;
}
</style>